<script setup lang="ts">
import { computed } from 'vue'

defineOptions({
  name: 'Condition',
  inheritAttrs: true,
})
const props = withDefaults(defineProps<{
  /** @default 0 */
  arrowLeft?: number
}>(), {
  arrowLeft: 0,
})
const left = computed<string>(() => `${props.arrowLeft}px`)
</script>

<template>
  <div class="condition">
    <div class="triangle" />
    <slot />
  </div>
</template>

<style lang="less" scoped>
.condition {
    --color: #F5F5F5;
    background-color: var(--color);
    padding: 16px 1em 16px 1em;
    @apply relative;
}
.triangle {
    width: 20px;
    height: 20px;
    top: -20px;
    left: v-bind(left);
    border: 10px solid transparent;
    border-bottom-color: var(--color);
    @apply absolute box-border;
}
</style>
